<template>
  <div class="project-info-report">
    <dt-search ref="search" :labelWidth="100" :xl="6" :xlBtn="3" v-show="showStatus">
    </dt-search>
    <div class="flex btn-content project_btn">
      <Button type="default" @click="changeShow()">{{showStatusTxt}}</Button>
      <Button type="primary" @click="adjustHeader()">调整表头排序</Button>
      <Button type="primary" v-if="unlocking('0207020701')" @click="exportExcelFun">导出</Button>
      <Button type="primary" class="operation" style="margin-left: 8px"
        v-if="unlocking('0207020702')" @click="operationClick">查看导出记录</Button>
    </div>
    <dt-grid ref='table' :columns="columns" :onFetch='onFetch' page></dt-grid>
    <!--表头排序-->
    <dynamic-header ref="dynamicHeader" @fieldCancel="fieldCancel" @headUpdate="headUpdate"
      :sourcedata="sourcedata" :targetdata="targetdata"></dynamic-header>
    <sop-Model ref="sopModel" />
    <operation-record ref="operationRecord"></operation-record>
  </div>
</template>
<script>
  import columnConfig from './components/projectInfoReportColumns'
  import sopModel from './components/projectSop.vue'
  import businessCommonMgr from '@/biz/businessReport/businessCommon'
  import watermark from '@/common/waterMark'
  import dynamicHeader from '@/components/dynamicHeader.vue'
  import searchOpt from './components/projectInfoReportSearch'
  import moment from 'moment'
  import projectMgr from '@/biz/businessReport/project'

  export default {
    components: {
      dynamicHeader,
      sopModel
    },
    data() {
      return {
        exportVisible: false,
        formValidate: {
          buildingId: '',
          buildingStatus: [],
          cityIds: [],
          companyIds: [],
          coopModes: [],
          developerAbbreviations: [],
          enterDate: [],
          enterEndDate: '',
          enterStartDate: '',
          exitDate: [],
          exitEndDate: '',
          exitStartDate: '',
          openDate: [],
          openEndDate: '',
          openStartDate: '',
          productTypes: [],
          queryDate: moment(new Date()).format("YYYY-MM"),
          salesModes: [],

        },
        tableData: [],
        columns: [],
        sourcedata: [],
        targetdata: [],
        filterParams: {},
        showStatus: true,
        showStatusTxt: '收起',
      }
    },
    created() {
      this.getHeadList()
    },
    mounted() {
      this.$refs.table.init(this)
      this.$refs.search.init(this.$refs.table, new searchOpt(this).options(), this
        .formValidate)
      this.$refs.table.fetch()
      watermark.set()
    },
    methods: {
      operationClick() {
        this.$refs.operationRecord.show('export_projectInfoReport', 'M_11')
      },
      changeShow() {
        this.showStatus = !this.showStatus
        this.showStatusTxt = this.showStatus ? '收起' : '展开'
        this.$refs.table.fixHeight()
      },
      adjustHeader() {
        this.$refs.dynamicHeader.show()
      },
      fieldCancel() {
        this.$refs.dynamicHeader.hide()
      },
      headUpdate(params) {
        businessCommonMgr.reportHeadUpdate({
          headType: 7,
          updateHead: params.updateInfo
        }).then((res) => {
          this.getHeadList()
          this.$refs.dynamicHeader.hide()
        })
      },
      //获取表头
      getHeadList() {
        businessCommonMgr
          .reportHeadList({ headType: 7 }).then(res => {
            if (res) {
              this.columns = columnConfig.options(this, res.showHead)
              this.sourcedata = res.hideHead
              this.targetdata = res.showHead
            }
          })
      },
      // 导出
      exportExcelFun() {
        if (!this.tableData.length) {
          this.$Message.warning('暂无数据！')
          return false
        }
        let params = Object.assign(this.filterParams)
        projectMgr.projectExport(params).then((res) => {})
      },

      onFetch(data) {
        let params = Object.assign(data)
        console.log(data, '****')
        params.exitStartDate = data.exitDate[0]
        params.exitEndDate = data.exitDate[1]

        params.enterStartDate = data.enterDate[0]
        params.enterEndDate = data.enterDate[1]

        params.openStartDate = data.openDate[0]
        params.openEndDate = data.openDate[1]

        params.queryDate = params.queryDate + '-01'
        this.filterParams = { ...params }
        return projectMgr.projectInfoReport(params).then((res) => {
          this.tableData = res.list;
          return res
        })
      },
      getSOPInfo(data) {
        if (data.tasksDesc == '0/0') return false
        data.title = '考核项'
        data.clickType = '1'
        this.$refs.sopModel.show(data)
      },
      getPointsSop(data) {
        if (data.deductPointsDesc == '0/0') return false
        data.title = '扣分项'
        data.clickType = '1,3'
        this.$refs.sopModel.show(data)
      }
    },
  }
</script>
<style lang="scss" scoped>
  .project-info-report {
    padding: 20px;
    width: 100%;

    .ivu-spin-fix {
      background-color: rgba(255, 255, 255, 0.35);
      width: calc(100% - 200px);
      left: 200px;
    }

    .dt-search {
      ::v-deep .ivu-form {

        .ivu-form-item-label {
          padding: 10px 5px 10px 0;
        }

        .ivu-form-item {
          margin-bottom: 20px;
        }

        .ivu-select-multiple .ivu-tag {
          max-width: 55%;
          padding: 0;
          margin: 3px 0;
        }
      }

    }

    .project_btn {
      justify-content: flex-end;

      .ivu-btn {
        margin-left: 8px;
      }
    }
  }
</style>